<template>
  <div style="margin-top: 58px">
    <el-divider></el-divider>
    <div class="show-date">
      <span>观影时间：</span>
      <el-radio-group v-model="time" @input="TimeChange">
        <el-radio class="date-item" :label="0"
          >今天&nbsp;{{ getDate(0) | fmtTime("MM月DD") }}</el-radio
        >
        <el-radio class="date-item" :label="1"
          >明天&nbsp;{{ getDate(1) | fmtTime("MM月DD") }}</el-radio
        >
        <el-radio class="date-item" :label="2"
          >后天&nbsp;{{ getDate(2) | fmtTime("MM月DD") }}</el-radio
        >
        <el-radio class="date-item" :label="3"
          >{{ getWeekDate(3) }}&nbsp;{{
            getDate(3) | fmtTime("MM月DD")
          }}</el-radio
        >
      </el-radio-group>
    </div>
    <el-table :data="planList" stripe style="width: 100%">
      <el-table-column prop="startDate" label="放映时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span class="begin-time">{{
            scope.row.pStarttime | fmtStartTime()
          }}</span>
          <br />
          <span class="end-time"
            >{{ scope.row.pEndtime | fmtStartTime() }}散场</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="name" label="语言版本" width="180">
        <template slot-scope="scope">
          <span class="lang">原版2D</span>
        </template>
      </el-table-column>
      <el-table-column prop="hName" label="演出厅">
        <template slot-scope="scope">
          <span class="hall-name">{{ scope.row.hName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="售价（元）">
        <template slot-scope="scope">
          <span class="sell-price">
            <span class="stonefont">{{ scope.row.price }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="选座购票">
        <template slot-scope="scope">
          <a class="buy-btn" type="primary" @click="goToBuy(scope.row)"
            >选座购票</a
          >
        </template>
      </el-table-column>
      <template>
        <div slot="empty">
          <div class="finished-all-shows">
            <span class="finish-img"></span>
            <br />
            <span class="finish-text">当日场次已放映完</span>
          </div>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getPlanByMId } from '@/api/plan'
export default {
  name: 'TtmsPlan',
  props: ['mId'],
  data () {
    return {
      time: 0,
      planList: []
    }
  },
  computed: {
  },

  async mounted () {
    const data = await getPlanByMId(this.mId, this.time)
    this.planList = data.data
  },
  filters: {
    fmtTime (value, format = 'MM月DD') {
      return dayjs(value).format(format)
    },
    fmtStartTime (value) {
      return dayjs(value).format('HH:mm')
    }
  },

  methods: {
    getDate (num) {
      const date = new Date()
      date.setDate(date.getDate() + num)
      // 当使用setDate()之后，date对象就发生了改变，所以之后getDate()就能获取到指定的日期
      // 这里的num就是你要加的天数，减也可以。
      const year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 天数
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      return `${year}-${month}-${day}`
    },
    //   根据传入今天后几天判断星期几
    getWeekDate (num) {
      const date = new Date()
      date.setDate(date.getDate() + num)
      const week = date.getDay()
      switch (week) {
        case 0:
          return '周日'
        case 1:
          return '周一'
        case 2:
          return '周二'
        case 3:
          return '周三'
        case 4:
          return '周四'
        case 5:
          return '周五'
        case 6:
          return '周六'
      }
    },
    async TimeChange () {
      const data = await getPlanByMId(this.mId, this.time)
      this.planList = data.data
    },
    goToBuy (row) {
      this.$router.push({
        path: '/seats',
        query: {
          mId: this.mId,
          pId: row.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.show-date {
  padding: 30px 0;
  font-size: 14px;
  color: #999;
  margin-left: 90px;
}
.date-item {
  margin-left: 13px;
  border-radius: 100px;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  display: inline-block;
  background-color: transparent;
  border-radius: 100px;
  color: #333;
  padding: 2px 10px;
  margin-left: 12px;
  cursor: default;
}
// 设置eltable无数据时的样式
::v-deep .el-table__empty-block .el-table__empty-text {
  min-height: 60px;
  text-align: center;
  width: 100%;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
  width: 20%;
}
::v-deep .el-table thead {
  font-weight: 500;
  background-color: #f7f7f7;
  color: #333;
  font-size: 16px;
  padding: 18px 0;
  text-align: center;
}
::v-deep .el-table thead th {
  padding: 16px 0;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}
.finished-all-shows {
  width: 100%;
  padding: 100px 0;
  background-color: #f9f9f9;
  text-align: center;
}
.finished-all-shows .finish-img {
  display: inline-block;
  width: 90px;
  height: 100px;
  margin-bottom: 10px;
  background: url(@/assets/imags/finish.715980ac71098cc2736f3ee16c7eab38.png)
    no-repeat;
}
.finished-all-shows .finish-text {
  display: inline-block;
  font-size: 20px;
  color: #999;
}
::v-deep .begin-time {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
::v-deep .end-time {
  font-size: 12px;
  margin-left: 13px;
  color: #999;
}
::v-deep .hall-name {
  font-size: 14px;
  color: #333;
}
::v-deep .lang {
  font-size: 14px;
  color: #333;
}
::v-deep .sell-price:before {
  content: "\FFE5";
  font-size: 12px;
}
::v-deep .sell-price {
  font-size: 18px;
  color: #f03d37;
  font-weight: 700;
}
::v-deep .stonefont {
  font-family: mtsi-font;
}
::v-deep .buy-btn {
  cursor: pointer;
  display: inline-block;
  width: 80px;
  height: 30px;
  color: #fff;
  background-color: #f03d37;
  font-size: 14px;
  line-height: 30px;
  border-radius: 100px;
  text-align: center;
}
</style>
